<meta charset="utf-8"/>
<div class="row">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-12">
        <div style="height:36px;margin-top:2px">
          <table class="no-border" style="display:inline">
            <tr>
              <td permission='carousel_btn_listData' class="hidden-480" style="padding: 0px 6px;display:none">
                标题
              </td>
              <td permission='carousel_btn_listData' style="display:none">
                <div class="input-group">
                  <input type="text" id="key_title" class="form-control search-query hidden-480" placeholder="标题" style="width:140px"/>
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnSearch">
                      <span class="ace-icon fa fa-search bigger-110"></span>
                      搜索
                    </button>
                  </span>
                </div>
              </td>
              <td permission='carousel_btn_add' style="display:none">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnAdd">
                      <span class="ace-icon glyphicon glyphicon-plus bigger-110"></span>
                      添加
                    </button>
                  </span>
                </div>
              </td>
              <td permission='carousel_btn_delByKeys' style="display:none">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-inverse btn-white" id="btnDel">
                      <span class="fa fa-trash red2 bigger-110"></span>
                      隐藏
                    </button>
                  </span>
                </div>
              </td>
            </tr>
          </table>
          <div class="hidden-480 pull-right tableTools-container" permission='carousel_btn_listData' style="display:none;margin-bottom:2px"></div>
        </div>
        <table id="tableListCarousel" class="table table-striped table-bordered table-hover"></table>
      </div>
    </div>
  </div>
</div>
<div id="div_carousel_edit" style="display:none;padding-top:2px;">
  <form class="form-horizontal" id="form_carousel_edit" role="form">
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">标题<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <input type="text" id="title" placeholder="标题" class="form-control" maxlength="64"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">广告分类<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <div class="input-group">
        <span class="input-group-btn">
          <button data-toggle="dropdown" class="btn btn-primary btn-white dropdown-toggle col-sm-12" style="margin-left:0.01em">
            <span id="dropdownLabelcategory">选择分类</span>
            <i class="ace-icon fa fa-angle-down"></i>
          </button>
          <ul class="dropdown-menu col-sm-12" style="margin-left:-1px;width:293px;min-width:293px;">
            <li>
              <a id="category_" href="javascript:winFn.dropdown('#category','','#dropdownLabelcategory','选择分类');">选择分类</a>
            </li>
            <li>
              <a id="category1" href="javascript:winFn.dropdown('#category',1,'#dropdownLabelcategory','图片轮播');">图片轮播</a>
            </li>
            <li>
              <a id="category2" href="javascript:winFn.dropdown('#category',2,'#dropdownLabelcategory','视频轮播');">视频轮播</a>
            </li>
            <li>
              <a id="category3" href="javascript:winFn.dropdown('#category',3,'#dropdownLabelcategory','首页广告');">首页广告</a>
            </li>
          </ul>
          <input id="category" type="hidden"/>
        </span>
      </div>
    </div>
   <!-- <label class="col-sm-3 control-label no-padding-right" for="appId"><div class="hr-4">小程序appId</div></label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <input type="text" id="appId" placeholder="第三方微信小程序的appId" class="form-control" maxlength="128"/>
    </div>-->
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">轮播文件<span style="color:#f00;display:inline-block;vertical-align:middle;width:auto;height:14px;line-height:18px">*</span></div></label>
    <div class="col-sm-8" id="img_path_parent">
      <div class="hr-4"></div>
      <input type="file" id="img_path" placeholder="轮播文件" class="form-control"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">跳转url<span style="display:inline-block;width:7px"></span></div></label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <input type="text" id="url" placeholder="跳转的url" class="form-control" maxlength="128"/>
    </div>
    <label class="col-sm-3 control-label no-padding-right"><div class="hr-4">排序号<span style="display:inline-block;width:7px"></span></div></label>
    <div class="col-sm-8">
      <div class="hr-4"></div>
      <input type="text" id="sort" placeholder="排序号，值越大越往后" class="form-control"/>
    </div>
  </form>
</div>
<div id="divKeyColumns" style="display:none;padding:1px 0px;"></div>
<div style="display:none;">
  <input type="hidden" id="carousel_btn_listData"/>
  <input type="hidden" id="carousel_btn_add"/>
  <input type="hidden" id="carousel_row_edit"/>
  <input type="hidden" id="carousel_row_queryById"/>
  <input type="hidden" id="carousel_row_delById"/>
  <input type="hidden" id="carousel_row_editEnable"/>
  <input type="hidden" id="carousel_btn_delByKeys"/>
  <input type="hidden" id="carousel_row_delData"/>
</div>
<script type="text/javascript">
  var scripts = [null, null];
  $('.page-content-area').ace_ajax('loadScripts', scripts, function(){
    var tableDom = '#tableListCarousel';
    $(function(){
      var urlRoute = '/carousel/';/*请求controller层的url*/
      var getList = urlRoute + 'listData';/*获取数据列表*/
      var urlAdd = urlRoute + 'add';/*添加*/
      var urlEdit = urlRoute + 'edit';/*编辑*/
      var urlQueryById = urlRoute + 'queryById';/*根据id查询对应的数据*/
      var urlDelById = urlRoute + 'delById';/*根据id隐藏对应的数据*/
      var urlDelData = urlRoute + 'delData';/*根据id删除对应的数据*/
      var urlEditEnable = urlRoute + 'editEnable';/*显示*/
      var urlDelByKeys = urlRoute + 'delByKeys';/*批量隐藏*/
      var thisTable = pageDataTable.initDataTable({
        tableDom : tableDom,
        sAjaxSource : getList,
        fnServerParams : function(params){
          params.push(
            {"name":"title","value":$("#key_title").val()}
          );
        },
        aoColumns : [
          {
            bSortable : false,
              mData : "kid",
              sWidth : "38px",
              sClass : "center",
              visible : true,/*若不用到时设为false即可,请勿删除否则有bug*/
              sTitle : '<label title="全选|不选"><input type="checkbox" class="ace" /><span class="lbl"></span></label>'
          },
          {
            mData : "title",
            bSortable : false,
            sTitle : "标题",
            render : function(value){
              if(value){
                return value;
              }else{
                return "";
              }
            }
          },
          {
            mData : "category",
            bSortable : false,
            sTitle : "广告分类",
            render : function(value){
              switch (value){
                case 1:
                  return '图片轮播';
                case 2:
                  return '视频轮播';
                case 3:
                  return '首页广告';
                default:
                  return '';
              }
            }
          },
          /*{
            mData : "appId",
            bSortable : false,
            sTitle : "小程序appId",
            render : function(value){
              if(value){
                return value;
              }else{
                return "";
              }
            }
          },*/
          {
            mData : "url",
            bSortable : false,
            sTitle : "跳转url",
            render : function(value){
              if(value){
                return "<a href='"+value+"' target=\"_blank\" title=\"点击查看\">浏览</a>";
              }else{
                return "";
              }
            }
          },
          {
            mData : "enabled",
            bSortable : false,
            sTitle : "状态",
            sWidth: "6%",
            render : function(value){
              switch (value){
                case 0:
                  return '显示';
                case 1:
                  return '隐藏';
                default:
                  return '';
              }
            }
          },
          {
            mData : "sort",
            bSortable : false,
            sTitle : "排序号",
            sWidth: "6%",
            render : function(value){
              if(value){
                return value;
              }else{
                return "";
              }
            }
          },
          {
            mData : "img_url",
            bSortable : false,
            sTitle : "图片路径",
            sWidth: "7%",
            render : function(value){
              if(value){
                return "<a href='"+webFiles+value+"' target=\"_blank\" title=\"点击查看\">查看</a>";
              }else{
                return "";
              }
            }
          },
          /*{
            mData : "validity",
            bSortable : false,
            sTitle : "终止日期",
            sWidth: "8%",
            render : function(value){
              if(value){
                return value;
              }else{
                return "";
              }
            }
          },*/
          {
            mData : "_kid_",
            sTitle : "<label style='color:#000;margin-left:6px;' title='单行操作'>操作选项</label>",
            bSortable : false,
            visible : true,/*若不用到时设为false即可,请勿删除否则有bug*/
            sWidth: "110px"
          }
        ],
        columnDefs : [
          {
            targets : 0,//指定的列
            render : function(value, type, row, meta){
              return '<label title="选择|取消"><input type="checkbox" name="kid" value="' + value + '" style="cursor:pointer;text-decoration:none;outline:none;"/><span class="lbl"></span></label>';
            }
          },
          {
            targets : -1,
              render : function(value, type, row, meta){
              return "<a href='javascript:thisPage.rowEdit(" + meta.row + ");' style='outline:none;text-decoration: none;color:#3b8cff;margin-left:6px;display:none' permission='carousel_row_edit'>编辑</a><a class='hidden-xs' href='javascript:thisPage.rowDel(" + meta.row + ");' style='outline:none;text-decoration: none;color:#09b0fc;margin-left:6px;display:none' permission='carousel_row_delById'>"+(row.enabled === 0 ? '隐藏' : '显示')+"</a><a class='hidden-xs' href='javascript:thisPage.rowDelData(" + meta.row + ");' style='outline:none;text-decoration: none;color:#f00;margin-left:6px;display:none' permission='carousel_row_delData'>删除</a>";
            }
          },
          {
            targets : [1,2,3,4,5],
              render : function(value, type, row, meta){
              return pageDataTable.formatColumn(value);
            }
          },
          {
          visible : false,//列的隐藏显示
          targets : []//指定列
          }
        ]
      });
      pageDataTable.buttons(thisTable);
      pageDataTable.action(thisTable);
      pageDataTable.select(thisTable, tableDom);
      pageDataTable.tooltip();
      var thisJquery = $(tableDom).dataTable();
      thisPage = {
        init: function(){
          this.initDom();
          this.addEvent();
          winFn.initFileShoose('#img_path',['jpg','png','mp4'],'请选择轮播文件');
        },
        initDom: function(){
          laydate.render({
            elem: '#validity',//指定元素
            format : 'yyyy-MM-dd',/*格式*/
            showBottom : true,/*是否显示底部栏*/
            type: 'date'/*格式,datetime|date|time*/
          });
        },
        createDropdown: function(){
        },
        addEvent: function(){
          this.btnEvent();
        },
        btnEvent: function(){
          $(tableDom + ' tbody').on('dblclick','tr', function(){
            if(verifyFn.inputRequired('#carousel_row_edit')){
              return;
            }
            thisPage.trDblclick(thisTable.row(this).data());
          });
          $('#btnAdd').on('click', function(){
            thisPage.edit();
          });
          //搜索按钮
          $('#btnSearch').on('click', function(){
            thisPage.search();
          });
          //按钮组-自定义显示列
          $('#iconColumn').parent().parent().on('click', function(){
            pageDataTable.columnCustom(thisTable, tableDom,'#divKeyColumns');
          });
          //按钮组-搜索
          $('#iconRefresh').parent().parent().on('click', function(){
            thisPage.search();
          });
          $('#btnDel').on('click', function(){
            thisPage.delKeys();
          });
        }, /*批量删除*/
        delKeys: function(){
          if(verifyFn.inputCheck('#carousel_btn_delByKeys','没有操作权限')) return;
          var kids = '';
          var index = 0;
          $(tableDom + ' tbody input:checked').each(function(){
            index++;
            var value = this.value;
            if(value != null && value != ''){
              if(kids.length > 0) kids += ",";
              kids += value;
            }
          });
          if(index == 0){
            layerFn.alert('请选择要隐藏的数据!', AppKey.code.code199);
            return;
          }
          layerFn.confirm('将要隐藏[' + index + ']条数据,确定要继续吗?', function(){
            layerFn.delBatchHint(urlDelByKeys, kids, function(data){
              thisPage.complete(data, null, true);
            });
          });
        },
        trDblclick: function(data){
          thisPage.edit(data.kid);
        },
        search: function(){
          if(verifyFn.inputCheck('#carousel_btn_listData','没有操作权限')) return;
          $(tableDom + '_wrapper table input[type=checkbox]').prop('checked', false);
          thisTable.draw();
        },
        resetForm: function(){
          winFn.clearFormData('#form_carousel_edit');
          winFn.removeInputFile('#img_path_parent');
          winFn.addDropdown('#dropdownLabelcategory','选择分类');
        },
        edit: function(kid){
          var title = '添加';
          if(kid != null && kid.length > 0){
            if(verifyFn.inputCheck('#carousel_row_queryById','没有操作权限')) return;
            title = '编辑';
            layerFn.queryByIdHint(urlQueryById, kid, function(data){
              thisPage.openDialog(title, kid, data);
            });
          }else{
            thisPage.openDialog(title);
          }
        },
        openDialog: function(title, kid, map){
          winFn.removeInputFile('#img_path_parent');
          var url = urlAdd;
          if(kid != null && kid.length > 0){
            url = urlEdit;
            if(verifyFn.inputCheck('#carousel_row_edit','没有编辑权限')) return;
          }else{
            if(verifyFn.inputCheck('#carousel_btn_add','没有添加权限')) return;
          }
          layerFn.addOrEdit(title,'#div_carousel_edit', ['450px','292px'], function(index, layero){
            if(verifyFn.inputCheck('#title','标题不能为空')) return;
            if(verifyFn.inputCheck('#category','请选择广告分类')) return;
            if(kid == null || kid.length <= 0){
              if(verifyFn.inputCheck('#img_path','请选择轮播文件')) return;
            }
            var category = winFn.getDomValue('#category');
            var params = {
		          title : winFn.getDomValue('#title'),
		          category : category,
		          appId : winFn.getDomValue('#appId'),
		          url : winFn.getDomValue('#url'),
		          validity : winFn.getDomValue('#validity'),
		          sort : winFn.getDomValue('#sort'),
		          img_path : winFn.getDomValue('#img_path'),
		          kid : kid
            };
            var formData = new FormData();
            for(var key in params){
              formData.append(key, params[key]);
            }
            formData.append("img_path", document.getElementById("img_path").files[0]);//获取上传文件
            layerFn.formSubmit(url, formData, function(data){
              thisPage.complete(data, index, true);
            });
          });
          thisPage.resetForm();//清空
          if(map != null){
            $.each(map.data, function(k, v){
              try{
                $('#' + k).val(v);
                if(k == 'category'){
                  winFn.editDropdown('#dropdownLabelcategory','category' + v);
                }
              }catch(e){}
            });
          }
        },
        rowEdit: function(index){
          var row = thisJquery.fnGetData(index);
          thisPage.edit(row.kid);
        },
        rowDelData : function(index){
          var row = thisJquery.fnGetData(index);
          if(verifyFn.inputCheck('#carousel_row_delData','没有删除权限')) return;
          layerFn.confirm('确定要彻底删除数据吗？', function(){
            layerFn.delByIdHint(urlDelData, row.kid, function(data){
              thisPage.complete(data, null, true);
            });
          });
        },
        rowDel: function(index){
          var row = thisJquery.fnGetData(index);
          var enabled = row.enabled;
          var title = '<span style="color:#09b0fc;margin-right:2px;">'+row.title+'</span>确定要<span style="color:#09b0fc">隐藏</span>操作吗?';
          var utl = urlDelById;
          if(enabled == 1){
            if(verifyFn.inputCheck('#carousel_row_editEnable','没有操作权限')) return;
            title = '<span style="color:#09b0fc;margin-right:2px;">'+row.title+'</span>确定要<span style="color:#09b0fc">显示</span>操作吗?';
            utl = urlEditEnable;
          }else{
            if(verifyFn.inputCheck('#carousel_row_delById','没有操作权限')) return;
          }
          layerFn.confirm(title, function(){
            layerFn.delByIdHint(utl, row.kid, function(data){
              thisPage.complete(data, null, true);
            });
          });
        },
        complete: function(data, index, search){
          try{
            if(index){
              layerFn.closeIndex(index);
            }
            if(search){
              thisPage.search();
            }
            if(data){
              layerFn.handleResult(data.msg, data.code);
            }
          }catch(e){}
        }
      };
      thisPage.init();
    });
  });
</script>